import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
    TextInput,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import {Table, TableWrapper, Row, Rows, } from 'react-native-table-component';
import mockData from './mockData'
import ModalDropdown from 'react-native-modal-dropdown';
import Pangitor from '../../routes/Pangitor'


export default class List extends Component<{}> {
  render() {

    const {list,count,page, query, setProjectId,selectRowData,thisTextChange,prjname,search} = this.props
    const ele = (value) => (
      <TouchableOpacity onPress={() => {
        query(list[value].id)}}>
        <View style={styles.btnContainer}>
          <Text style={styles.btn}>选择</Text>
        </View>
      </TouchableOpacity>
    );

    const tableData = list.map((val, index) => {
      let arr = [index + 1]
      if(val.tableData.length < 5){
        val.tableData = arr.concat(val.tableData)
        val.tableData.push(ele(index))
      }
      return val.tableData
    });
    return (
      <ScrollView style={styles.container}>
        <View style={{flexDirection:'row',alignItems:'center',marginBottom:10}}>
          <ModalDropdown style={styles.selectBt} textStyle={{fontSize:18}} defaultValue={'整改类型'}
                         options={['记录','整改通知单','停工通知书']}
                         renderButtonText = {(rowData) =>{selectRowData(rowData)}}
                         dropdownStyle={{marginTop:14}} dropdownTextStyle={{fontSize:18}}/>

          <View style={{flex:10,height:50,borderWidth:1,borderColor:Colors.btnPrimaryBg}}>
            <TextInput underlineColorAndroid='transparent' style={{paddingRight:0}}
                       value={prjname}
                       placeholder={'请输入您要查找的工程名称...'}
                       onChangeText={(val) =>{thisTextChange(val)}}/>
          </View>
          <View style={styles.searchBt}>
            <Text style={{fontSize:25,color:'white'}} onPress={() =>{search()}}>搜索</Text>
          </View>
        </View>
        {
          tableData.length>0?
            <View>
              <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                <Row data={mockData.tableHead} flexArr={[1, 7, 3, 3, 2]} style={styles.head} textStyle={styles.text}/>
                <TableWrapper style={{flexDirection: 'row'}}>
                  <Rows data={tableData} flexArr={[1, 7, 3, 3, 2]} style={styles.row} textStyle={styles.itemText}/>
                </TableWrapper>
              </Table>
                <Pangitor style={{height: 500}} mainFunction={'query'} namespace={'examination'} currentPage={page} totalPage={count} />
            </View>:
            <Text style={{paddingTop:200,textAlign:'center',fontSize:20}}>暂无相关内容</Text>
        }
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {paddingLeft: 20, paddingRight: 20, marginBottom: 30},
  text: {textAlign: 'center', color: '#fff', fontSize: 22,},
  itemText: {
    textAlign: 'center',
    fontSize: 19,
    marginBottom:10,
    marginTop:10
  },
  row: {
    // height: 48,
    backgroundColor: '#fff',
  },
  btnContainer: {alignItems: 'center', justifyContent: 'center'},
  btn: {
    height: 28, paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
    alignItems: 'center', color: '#fff',
    textAlign: 'center', backgroundColor: Colors.btnPrimaryBg,
    borderRadius: 7, fontSize: 18,
  },
  btnText: {textAlign: 'center', color: '#fff', fontSize: 22},
  head: {height: 50, backgroundColor: Colors.navbarBackground,},
  title: {flex: 1, backgroundColor: '#f6f8fa'},
    searchBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:8,
        paddingBottom:8,
        // paddingLeft:5,
        borderBottomRightRadius:5,
        borderTopRightRadius:5,
        flex:2
    },
    selectBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:14,
        paddingBottom:14,
        // paddingLeft:18,
        borderBottomLeftRadius:5,
        borderTopLeftRadius:5,
        flex:1.4
    },
});